<!-- 加密中心 -->
<template>
	<div class="verification">
		<div class="warper">
			<el-form :model="form" :rules="rules" :label-position="isLandscapes ? 'right' : 'top'">
				<!-- <p class="titletip">每个存证文件都会被颁发专属的存证证书。</p> -->
				<el-form-item prop="file" label="文件上传" nolabel v-show="form.fileType === 'file'" v-if="isLandscapes">
					<el-upload class="upload-button" multiple :file-list="fileList" :on-change="handleChange" :accept="fileAccept" :auto-upload="false" :show-file-list="false">
						<el-button type="primary">上传文件</el-button>
						<template #tip>
							<div class="el-upload__tip">上传总大小限制为{{ fileSize }}M，数量为1个</div>
						</template>
					</el-upload>
				</el-form-item>
				<div class="remind">
					<el-icon>
						<svgIcon name="icon-color-remind"></svgIcon>
					</el-icon>
					特别提醒：<span>严禁上传他人著作权作品、以及违法、反动、危害社会公共安全等不良信息。</span>
				</div>
				<el-form-item prop="file" label="文件上传" nolabel v-show="form.fileType === 'file'">
					<el-upload class="upload-hover" drag multiple :accept="fileAccept" :file-list="fileList" :on-change="handleChange" :auto-upload="false">
						<el-icon class="el-icon-upload">
							<svgIcon name="icon-color-file"></svgIcon>
						</el-icon>
						<div class="el-upload__text" v-if="isLandscapes">点击上方“上传文件”或将文件拖拽到此区域</div>
						<div class="el-upload__text" v-else>
							<p>点击此处上传文件</p>
							<p>上传总大小限制为{{ fileSize }}M，数量为1个</p>
						</div>
						<template #file="{ file }">
							<li class="el-upload-list__item-name">
								<span class="name">
									<el-icon>
										<svgIcon name="icon-attachment"></svgIcon>
									</el-icon>
									{{ file.name }}
								</span>
								<el-icon class="remove" @click="removeFile(file)">
									<svgIcon name="icon-close"></svgIcon>
								</el-icon>
							</li>
						</template>
					</el-upload>
				</el-form-item>
			</el-form>
			<div class="statement">
				<img src="@/assets/icons/color/blockchain.svg" alt="" />
				<div class="text">
					<p>文件的哈希计算过程完全在前台执行，平台不接触您的任何文件。</p>
					<p>
						开源程序仓库地址：
						<a target="_blank" href="https://gitee.com/zhongshang-chain/encryption-center"> https://gitee.com/zhongshang-chain/encryption-center </a>
						<el-icon @click="copyText('https://gitee.com/zhongshang-chain/encryption-center', true)"><ep-CopyDocument /></el-icon>
					</p>
				</div>
			</div>
			<div class="button">
				<el-button type="primary" class="submit" @click="submit" :disabled="!fileList.length">开始计算</el-button>
			</div>
		</div>
		<platformInfo />
	</div>
	<el-dialog :width="isLandscapes ? '40%' : '80%'" title="&emsp;" notitleline v-model="dialogVisible" draggable align-center>
		<div class="verificationSuccess">
			<div class="content">
				<el-icon>
					<SvgIcon name="icon-color-gethash"></SvgIcon>
				</el-icon>
				<div class="text">
					<p class="title">哈希</p>
					<p>{{ form.hash }}</p>
				</div>
			</div>
			<div class="button" @click="copyText(form.hash, true)">复制</div>
		</div>
	</el-dialog>
</template>
<script lang="ts" setup>
import type { UploadFile, UploadFiles } from "element-plus";
import { copyText } from "@/utils/common";
import { verifyFileFormat, b2mb, fileToBindary } from "@/utils/common";
import { useStyleStore } from "@/stores/modules/style";
import platformInfo from "@/layout/platformInfo.vue";
import { sha256 } from "js-sha256";

// 判断设备是否横屏
const isLandscapes = computed(() => {
	return useStyleStore().isLandscapes;
});
const dialogVisible = ref(false);
const fileList = ref<UploadFile[]>([]);
const fileAccept = "*";
const fileSize = 50;
const form = reactive({
	remarks: "",
	main: "",
	fileType: "file",
	right: true,
	doneTime: "",
	city: "",
	certificateCode: "",
	certificateType: "1",
});
// 文件改变
function handleChange(uploadFile: UploadFile, uploadFiles: UploadFiles) {
	beforeAvatarUpload(uploadFile)
		.then(() => {
			fileList.value = [uploadFile];
		})
		.catch(() => {
			fileList.value = [];
		});
}
// 删除文件
function removeFile(file: UploadFile) {
	fileList.value = fileList.value.filter((item) => item.uid !== file.uid);
}
// 校验文件格式
function beforeAvatarUpload(rawFile: UploadFile): Promise<void | undefined | null | boolean | File | Blob> {
	return new Promise((resolve, reject) => {
		const size: number = rawFile.size ? rawFile.size : 0;
		if (b2mb(size) > fileSize) {
			ElMessage({ type: "error", message: `文件大小不能超过${fileSize}M！` });
			reject();
		} else {
			if (verifyFileFormat(fileAccept, rawFile)) {
				resolve();
			} else {
				ElMessage({ type: "error", message: "请上传正确格式的文件！" });
				reject();
			}
		}
	});
}

async function submit() {
	if (!fileList.value.length) {
		ElMessage({ type: "error", message: "请上传文件！" });
		return;
	}
	const file = fileList.value[0];
	const loading = ElLoading.service({ lock: true, text: "计算中...", background: "rgba(0, 0, 0, 0.7)" });
	const dataBuffer = await fileToBindary(file.raw as File);
	form.hash = sha256(dataBuffer);
	dialogVisible.value = true;
	loading.close();
}
</script>
<style lang="scss" scoped>
//横屏样式
@media (orientation: landscape) {
	.verification {
		--el-color-primary: #254caa;
		--el-color-primary-light-3: #254caa;
		--el-color-primary-light-7: #9cb5f0;
		--el-color-primary-light-9: #a9bff3;
		.warper {
			width: 100%;
			min-height: 90vh;
		}
		:deep(.el-form) {
			padding: 75px 0;
			margin: 0 auto;
			width: 1000px;
			padding-bottom: 0;
			background-color: #fff;
			.titletip {
				font-family:
					PingFangSC,
					PingFang SC;
				font-weight: 500;
				font-size: 21px;
				color: #3f4254;
				line-height: 29px;
				text-align: left;
				font-style: normal;
			}
			.remind {
				display: flex;
				align-items: center;
				margin: 0 auto;
				width: 1344px;
				height: 43px;
				background: #fffbec;
				border: 1px solid #fff2c0;
				font-weight: 400;
				font-size: 19px;
				color: #333333;
				font-style: normal;
				margin-bottom: 24px;

				.el-icon {
					color: #ffcf18;
					margin-left: 20px;
					margin-right: 7px;
				}
			}

			.el-form-item {
				margin-bottom: 27px;
				&[nolabel] {
					.el-form-item__label {
						display: none;
					}
					.el-form-item__content {
						margin-left: 0px;
					}
				}
				.el-form-item__label {
					width: 123px;
					color: #4a4a4a;
				}
				.el-form-item__content {
					flex-wrap: nowrap;
					.el-radio.el-radio--large {
						height: 32px;
					}
					.el-select {
						width: 441px;
						margin-right: 21px;
					}
					.el-date-editor {
						width: 293px;
					}
					.el-button {
						width: 90px;
					}
					.upload-button {
						display: flex;
						align-items: center;
						.el-button {
							width: 120px;
						}
						.el-upload__tip {
							margin: 0;
							margin-left: 10px;
							font-size: 19px;
						}
					}
					.upload-hover {
						width: 100%;
						.el-upload__text {
							font-size: 19px;
						}
						.el-icon-upload {
							font-size: 81px;
						}
						.el-upload-dragger {
							--el-upload-dragger-padding-horizontal: 80px;
						}
						.el-upload-list {
							.el-upload-list__item-name {
								display: flex;
								align-items: center;
								justify-content: space-between;
								font-size: 19px;
								.name {
									display: flex;
									align-items: center;
									.el-icon {
										font-size: 22px;
										margin-right: 13px;
									}
								}
								.remove {
									cursor: pointer;
								}
							}
						}
					}
					.peopleId {
						margin-left: 40px;
						white-space: nowrap;
						font-family:
							PingFangSC,
							PingFang SC;
						font-weight: 400;
						font-size: 16px;
						color: #666666;
						line-height: 27px;
						text-align: left;
						font-style: normal;
					}
				}
			}
		}
		.statement {
			display: flex;
			height: 120px;
			background: rgba(58, 105, 245, 0.18);
			border-radius: 11px;
			align-items: center;
			margin: 0px 460px;
			margin-bottom: 40px;
			img {
				width: 111px;
				height: 83px;
				margin-left: 67px;
				margin-right: 51px;
			}
			.text {
				p {
					margin: 0;
					font-family:
						PingFangSC,
						PingFang SC;
					font-weight: 400;
					font-size: 19px;
					color: #333333;
					line-height: 27px;
					text-align: left;
					font-style: normal;
					a {
						text-decoration: none;
						color: #2e4ba3;
					}
					.el-icon {
						cursor: pointer;
						color: #2e4ba3;
						vertical-align: middle;
					}
				}
			}
		}
		.button {
			display: flex;
			justify-content: center;
			margin-bottom: 300px;
			.el-button {
				width: 248px;
				font-size: 21px;
				height: 53px;
			}
		}
		:deep(.platformInfo) {
			height: 80px;
			background: #f0f0f0;

			p {
				font-family:
					PingFangSC,
					PingFang SC;
				font-weight: 400;
				font-size: 21px;
				color: #666666;
				line-height: 29px;
				text-align: left;
				font-style: normal;
			}
			img {
				height: 25px;
				filter: brightness(0.5);
			}
		}
	}
	.verificationSuccess {
		padding: 60px;
		padding-bottom: 0;
		.content {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			.el-icon {
				font-size: 240px;
			}
			.text {
				flex: 1;
				margin-left: 30px;
				.title {
					font-family:
						PingFangSC,
						PingFang SC;
					font-weight: 500;
					font-size: 24px;
					color: #4a4a4a;
					line-height: 24px;
					text-align: left;
					font-style: normal;
				}
				p {
					font-family:
						PingFangSC,
						PingFang SC;
					font-weight: 400;
					font-size: 24px;
					color: #666666;
					line-height: 32px;
					text-align: left;
					font-style: normal;
					word-break: break-all;
				}
			}
		}
		.button {
			width: 110%;
			height: 120px;
			line-height: 120px;
			cursor: pointer;
			text-align: center;
			font-family:
				PingFangSC,
				PingFang SC;
			font-weight: 500;
			font-size: 21px;
			color: #2e4ba3;
			font-style: normal;
			border-top: 1px solid #ebebeb;
			margin-left: -5%;
			margin-top: 20px;
		}
	}
}
// 1440 样式
@media screen and (max-width: 1440px) {
	.verification {
		:deep(.el-form) {
			padding: 25px 0;
			width: 80%;
			.remind {
				margin-left: 0;
			}
		}
	}
	.warper {
		width: 100%;
		min-height: 90vh;
	}
	.verificationSuccess {
		width: 60vw;
		padding: 20px;
		padding-bottom: 0;
		.content {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			.el-icon {
				font-size: 100px;
			}
			.text {
				flex: 1;
				margin-left: 30px;
				.title {
					font-family:
						PingFangSC,
						PingFang SC;
					font-weight: 500;
					font-size: 16px;
					color: #4a4a4a;
					line-height: 24px;
					text-align: left;
					font-style: normal;
				}
				p {
					font-family:
						PingFangSC,
						PingFang SC;
					font-weight: 400;
					font-size: 16px;
					color: #666666;
					line-height: 32px;
					text-align: left;
					font-style: normal;
					word-break: break-all;
				}
			}
		}
		.button {
			width: 110%;
			height: 60px;
			line-height: 60px;
			cursor: pointer;
			text-align: center;
			font-family:
				PingFangSC,
				PingFang SC;
			font-weight: 500;
			font-size: 16px;
			color: #2e4ba3;
			font-style: normal;
			border-top: 1px solid #ebebeb;
			margin-left: -5%;
			margin-top: 20px;
		}
	}
}
//竖屏样式
@media (orientation: portrait) {
	.verification {
		--el-color-primary: #254caa;
		--el-color-primary-light-3: #254caa;
		--el-color-primary-light-7: #9cb5f0;
		--el-color-primary-light-9: #a9bff3;
		.warper {
			width: 100%;
			min-height: 90vh;
		}
		background: #f8f8f8;
		padding-top: 1px;
		:deep(.el-form) {
			background-color: #fff;
			margin: 38px auto;
			padding: 19px 29px;
			border-radius: 15px;
			.titletip {
				font-family:
					PingFangSC,
					PingFang SC;
				font-weight: 500;
				font-size: 31px;
				color: #3f4254;
				line-height: 42px;
				text-align: left;
				font-style: normal;
			}
			.remind {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin: 0 auto;
				background: #fffbec;
				border: 1px solid #fff2c0;
				font-weight: 400;
				font-size: 27px;
				color: #333333;
				font-style: normal;
				margin-bottom: 48px;
				padding: 19px;
				.el-icon {
					color: #ffcf18;
					font-size: 38px;
					margin-right: 7px;
				}
				span {
					display: block;
					width: 100%;
					margin-left: 44px;
				}
			}
			.el-form-item {
				margin-bottom: 27px;
				&[nolabel] {
					.el-form-item__label {
						display: none;
					}
					.el-form-item__content {
						margin-left: 0px;
					}
				}
				.el-form-item__label {
					width: 123px;
					color: #4a4a4a;
				}
				.el-form-item__content {
					flex-wrap: nowrap;
					.el-radio.el-radio--large {
						height: 32px;
					}
					.el-select {
						width: 441px;
						margin-right: 21px;
					}
					.el-date-editor {
						width: 293px;
					}
					.el-button {
						width: 90px;
					}
					.upload-button {
						display: flex;
						align-items: center;
						.el-upload__tip {
							margin: 0;
							margin-left: 10px;
						}
					}
					.upload-hover {
						width: 100%;
						.el-icon-upload {
							font-size: 81px;
						}
						.el-upload-list {
							.el-upload-list__item-name {
								display: flex;
								align-items: center;
								justify-content: space-between;
								font-size: 19px;
								.name {
									display: flex;
									align-items: center;
									.el-icon {
										font-size: 22px;
										margin-right: 13px;
									}
								}
								.remove {
									cursor: pointer;
								}
							}
						}
					}
					.peopleId {
						margin-left: 40px;
						white-space: nowrap;
						font-family:
							PingFangSC,
							PingFang SC;
						font-weight: 400;
						font-size: 16px;
						color: #666666;
						line-height: 27px;
						text-align: left;
						font-style: normal;
					}
				}
			}
		}
		.statement {
			display: flex;
			padding: 20px 0;
			background: rgba(58, 105, 245, 0.18);
			border-radius: 11px;
			align-items: center;
			margin: 29px;

			img {
				width: 129px;
				height: 96px;
				margin-left: 29px;
				margin-right: 27px;
			}
			.text {
				p {
					font-family:
						PingFangSC,
						PingFang SC;
					font-weight: 400;
					font-size: 27px;
					color: #333333;
					line-height: 38px;
					text-align: left;
					font-style: normal;
					margin: 0;
					a {
						text-decoration: none;
						color: #2e4ba3;
					}
					.el-icon {
						cursor: pointer;
						color: #2e4ba3;
						vertical-align: middle;
					}
				}
			}
		}
		.button {
			display: flex;
			justify-content: center;
			margin-bottom: 300px;
			margin: 38px 29px;
			.el-button {
				width: 100%;
				height: 90px;
				font-size: 31px;
			}
		}
		:deep(.platformInfo) {
			height: 80px;
			background: #f0f0f0;

			p {
				font-family:
					PingFangSC,
					PingFang SC;
				font-weight: 400;
				font-size: 21px;
				color: #666666;
				line-height: 29px;
				text-align: left;
				font-style: normal;
			}
			img {
				height: 25px;
				filter: brightness(0.5) grayscale(1);
			}
		}
	}
	.verificationSuccess {
		width: 80vw;
		padding: 30px;
		padding-bottom: 0;
		.content {
			display: flex;
			flex-direction: column;
			align-items: center;
			.el-icon {
				font-size: 269px;
			}
			.text {
				flex: 1;
				margin-left: 30px;
				.title {
					font-family:
						PingFangSC,
						PingFang SC;
					font-weight: 500;
					font-size: 35px;
					color: #4a4a4a;
					line-height: 35px;
					text-align: center;
					font-style: normal;
				}
				p {
					font-family:
						PingFangSC,
						PingFang SC;
					font-weight: 400;
					font-size: 27px;
					color: #666666;
					line-height: 46px;
					text-align: left;
					font-style: normal;
					word-break: break-all;
				}
			}
		}
		.button {
			width: 110%;
			height: 80px;
			line-height: 80px;
			cursor: pointer;
			text-align: center;
			font-family:
				PingFangSC,
				PingFang SC;
			font-weight: 500;
			color: #2e4ba3;
			font-style: normal;
			font-size: 31px;
			border-top: 1px solid #ebebeb;
			margin-left: -5%;
			margin-top: 20px;
		}
	}
}
</style>
